<!doctype html>
<html class="no-js">
<script src="../js/head.js"></script>
<body>
<script src="../js/header.js"></script>
<div class="am-cf admin-main">
    <!-- sidebar start -->
    <script src="../js/sidebar.js"></script>
    <!-- sidebar end -->

    <!-- content start -->
    <div class="admin-content" id="content-body">
        <div class="admin-content-body">
            <div class="am-cf am-padding am-padding-bottom-0">
                <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">打卡记录</strong>
                </div>
            </div>

            <hr>
            <table id="dg" title="打卡记录" class="easyui-datagrid" style="width:auto"
                   toolbar="#toolbar" pagination="true"
                   rownumbers="true" fitColumns="true" singleSelect="true" data-options="fit:true,fitColumns:true">
                <thead>
                <tr>
                    <th field="id" width="50" sortable="true">编号</th>
                    <th field="uid" width="50" sortable="true">员工编号</th>
                    <th field="employeeName" width="50" sortable="true">员工姓名</th>
                    <th field="departmentId" width="50" sortable="true" hidden>部门编号</th>
                    <th field="departmentName" width="50" sortable="true">所在部门</th>
                    <th field="record1" width="50" data-options="formatter:timeFormatter">打卡时间一</th>
                    <th field="record2" width="50" data-options="formatter:timeFormatter">打卡时间二</th>
                    <th field="time" width="50" data-options="formatter:dateFormatter">打卡日期</th>
                </tr>
                </thead>
            </table>
            <div id="toolbar">
                <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true"
                   onclick="destroyUser()" id="delete">删除</a>

                <form class="form-inline" id="searchForm">
                    <div class="form-group">
                        编号:　　
                        <input type="number" class="easyui-textbox" name="id" validType="lengthAndRange[0,20,0]" >
                    </div>
                    <div class="form-group">
                        员工:　　
                        <input class="easyui-combobox" name="uid" style="width:auto;height:26px;"
                               data-options="
                        valueField:'id',
                        textField:'name',
                        url:'../employee?rows=100000',
                        method:'get',
                        loadFilter: function (data){
                            return data.result.list;
                        }" editable="false">
                    </div>
                    <div class="form-group">
                        所在部门:
                        <input class="easyui-combobox" name="departmentId" style="width:auto;height:26px;"
                               data-options="
                        valueField:'id',
                        textField:'name',
                        url:'../department?rows=100000',
                        method:'get',
                        loadFilter: function (data){
                            return data.result.list;
                        }" editable="false">
                    </div>
                    <br/>
                    <div class="form-group">
                        打卡日期:
                        <input id="start" type="text" class="easyui-datebox" name="start"
                               validType="dateBefore"
                               editable="false">
                        -----至-----
                        <input id="end" type="text" class="easyui-datebox" name="end"
                               validType="dateAfter"
                               editable="false">
                    </div>
                    <a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="recordSearch()">查询</a>
                </form>
            </div>
        </div>
        <script src="../js/footer.js"></script>
    </div>
    <!-- content end -->
</div>

<a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu"
   data-am-offcanvas="{target: '#admin-offcanvas'}"></a>

<script src="../js/util.js"></script>
<script>

    function destroyUser() {
        var row = $('#dg').datagrid('getSelected');
        if (row) {
            $.messager.confirm('确认', '确认删除该条记录？', function (r) {
                if (r) {
                    $.ajax({
                        type: 'delete',
                        dataType: 'json',
                        contentType: 'application/json',
                        async: false,
                        url: '../record?id=' + row.id,
                        success: function (result) {
                            if (result.success) {
                                $('#dg').datagrid('reload');    // reload the user data
                            } else {
                                $.messager.show({    // show error message
                                    title: 'Error',
                                    msg: result.message
                                });
                            }
                        }
                    });
                }
            });
        }
    }

    function recordSearch() {
        if ($("#searchForm").form('validate')) {
            var jsondata = JSON.form2param($('#searchForm').serializeArray());
            $('#dg').datagrid('load', jsondata);
        }
    }
    $(function () {
        $("#dg").datagrid({
            url: "../record",
            method: 'get',

            loadFilter: function (data) {
                return {
                    "total": data.result.total,
                    "rows": data.result.list
                }
            }
        });

        if(current.job != 0){
            $('#delete').hide()
        }
    });

    $.extend($.fn.validatebox.defaults.rules, {
        lengthAndRange: {
            validator: function(value, param){
                var value = $.trim(value);
                return value.length >= param[0] && value.length <= param[1] && value >= param[2];
            },
            message: 'Please enter at least {0} characters and less than {1} characters, larger than {2}.'
        },
        dateBefore:{
            validator: function(value, param){
                var end = $('#end').datebox('getValue');
                console.debug("end date:"+end);
                if (end){
                    return value <= end;
                }
                else{
                    return true;
                }
            },
            message: 'Please enter a valid date.'
        },
        dateAfter:{
            validator: function(value, param){
                var start = $('#start').datebox('getValue');
                console.debug("start date:"+end);
                if (end){
                    return value >= start;
                }
                else{
                    return true;
                }
            },
            message: 'Please enter a valid date.'
        }

    });
</script>
</body>
</html>
